﻿<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高考成绩查询页面</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>  
	<div id="app">
	<div style="float:right"><a href="https://1.15.138.49:8010"><-回退登录</a></div><br>
	<div style="float:right"><a href="https://1.15.138.49:8010/student/logout">登出系统</a></div>
		<div style="text-align:center">
			<label style="margin-left:80px">请输入准考证号进行高考成绩查询：<input v-model="input" type="number" placeholder="请输入准考证号"/></label>
			<label style="font-size:16px; color:blue"> * 必选项</label><br><br>
			<button @click="search()">成绩查询</button><br><br>
		</div>
		<div style="text-align:center">
			<label style="font-weight:bold;font-size:18px; color:#F00">{{info}}</label><br><br>
		</div>
		<label style="font-weight:bold;font-size:20px; color:blue">&nbsp;&nbsp;&nbsp;{{detail}}</label><br>
		<div v-if="success">
			<ul style="font-weight:bold;font-size:16px;">
				<li>姓名： {{list.name}}</li>
				<li>准考证号： {{list.uniqueNumber}}</li>
				<li>语文： {{list.chinese}}</li>
				<li>数学： {{list.mathematics}}</li>
				<li>英语： {{list.english}}</li>
				<li>{{list.comprehensiveTitle}}： {{list.comprehensive}}</li>
				<li>总分： {{list.totalScore}}</li><br><br>
				<li style="font-weight:bold;font-size:18px; color:red">全省分段名次： {{list.order}}</li>
			</ul>
		</div>
	</div>
<script type = "text/javascript">
new Vue({
    el: '#app',
    data: {
    	success: false,
    	list: null,
        info: '',
        detail: '',
        input: ''
    },
    methods: {
        search() {
        	this.success = false
        	this.list = null
        	this.info= ''
        	this.detail= ''
        	if (this.input == null || this.input == '') {
						this.info = '准考证号不能为空!'
        	}
        	else {
            axios.post('/score/search', this.input).then(response =>{
            	if (response.data.code == 200) {
            		this.success = true
            		this.detail = response.data.msg
            		this.list = response.data.data
            		console.log(this.list.order)
            		if(this.list.order <= 200) {
            			this.list.order = "恭喜，您已进入全省前200位次！"
            		}
            		if(this.list.order > 100000) {
            			this.list.order = "考沃烂怂几分，真是把脸都丢完了，还好意思查分！"
            		}
            	} else {
            		this.info = response.data.msg
            	} }).
            catch(function(error) {
                console.log(error);
            });
        	}
        }
    }
})
</script>
</body>
</html>